<template>
  <view class="tax-page">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <text class="nav-title">个税计算器</text>
      <button class="share-btn" open-type="share">分享</button>
    </view>
    <!-- Tab切换栏 -->
    <!-- <view class="tab-bar">
      <view class="tab-item tab-active">工资薪金</view>
      <view class="tab-item">年终奖</view>
      <view class="tab-item">劳务报酬</view>
      <view class="tab-item">更多</view>
    </view> -->
    <!-- 内容区域 -->
    <view class="tab-content">
      <!-- 月度/年度切换 -->
      <view class="period-switch">
        <view class="period-item" :class="{ 'period-active': period === 'month' }" @click="period = 'month'">月度</view>
        <view class="period-item" :class="{ 'period-active': period === 'year' }" @click="period = 'year'">年度</view>
      </view>
      <!-- 工资输入 -->
      <view class="form-group">
        <view class="form-label-row">
          <text class="form-label">{{ period === 'month' ? '本月工资收入(元)' : '税前月平均工资(元)' }}</text>
          <text class="form-label-tip">缴纳期数：{{ period === 'month' ? payMonths : 12 }}月</text>
        </view>
        <input class="form-input" placeholder="请输入税前月工资" v-model="formData.income" type="number" />
      </view>
      <!-- 五险一金分组 -->
      <view class="form-group">
        <view class="form-label-row">
          <text class="form-label">五险一金(元)</text>
          <text class="form-label-tip">*根据税前工资计算，可手动修改</text>
        </view>
        <input class="form-input" placeholder="五险一金个人缴纳部分（选填）" v-model="formData.insuranceTotal" type="number" />
        <view class="form-link-row">
          <text class="form-link" @click="showInsuranceDetail = !showInsuranceDetail">{{ showInsuranceDetail ? '收起基数' : '修改基数' }}</text>
        </view>
        <view class="form-desc">五险一金 = {{ insuranceDesc }}</view>
        <view v-if="showInsuranceDetail" class="form-subgroup">
          <input class="form-input" placeholder="请输入社保缴纳基数" v-model="formData.socialBase" type="number" />
          <input class="form-input" placeholder="请输入社保缴纳比例" v-model="formData.socialRate" type="number" />
          <input class="form-input" placeholder="请输入公积金缴纳基数" v-model="formData.fundBase" type="number" />
          <input class="form-input" placeholder="请输入公积金缴纳比例" v-model="formData.fundRate" type="number" />
        </view>
        <view class="form-help-row">
          <text class="form-help-icon" @click="onInsuranceHelp">?</text>
          <text class="form-help-link" @click="onInsuranceHelp">五险一金怎么算</text>
        </view>
        <view class="form-help-desc">
          五险一金的缴纳根据缴纳基数计算，缴纳基数一般为个人税前工资。<br />
          五险一金=社保缴纳基数*比例+公积金缴纳基数*比例
        </view>
      </view>
      <!-- 专项附加扣除 -->
      <view class="form-group">
        <view class="form-label-row">
          <text class="form-label">专项附加扣除(元)</text>
        </view>
        <input class="form-input" placeholder="请输入专项附加扣除金额" v-model="formData.specialDeduction" type="number" />
        <view class="form-link-row">
          <text class="form-link" @click="onSpecialHelp">帮我计算</text>
        </view>
      </view>
      <!-- 主按钮 -->
      <view :class="['main-btn', isBtnActive ? '' : 'main-btn-disabled']" @click="submit">{{ isUnlock ? "计算" : "看广告获取计算结果" }}</view>
    </view>
    <!-- 结果弹窗 -->
    <view v-if="showResult" class="result-modal-mask" @click="showResult = false">
      <view class="result-modal" @click.stop>
        <view class="result-title">计算结果</view>
        <view class="result-row"><text>应纳税额：</text><text class="result-value">{{ result.tax }} 元</text></view>
        <view class="result-row"><text>税后收入：</text><text class="result-value">{{ result.afterTaxIncome }} 元</text></view>
        <view class="result-row"><text>税率：</text><text class="result-value">{{ result.taxRate }}%</text></view>
        <view class="result-modal-btn" @click="showResult = false">知道了</view>
      </view>
    </view>
    <view class="pub_ad_banner">
        <!-- #ifdef MP-TOUTIAO -->
        <ad
          :unit-id="adBannerIdDouyin"
          :ad-intervals="30"
          :fixed="false"
          type="banner"
          scale="100"
        />
        <!-- #endif -->
        <!-- #ifdef MP-KUAISHOU -->
        <ad :type="100011054" :unit-id="adBannerIdKuaishou"></ad>
        <!-- #endif -->
      </view>
  </view>
</template>

<script>
import {
  showAdConfirmModal,
  adVideoCreate,
  adVideoShow,
  adBannerIdDouyin,
  adBannerIdKuaishou,
} from "@/common/ad";

export default {
  name: 'GeShuiCalculator',
  data() {
    return {
      adBannerIdDouyin: adBannerIdDouyin,
      adBannerIdKuaishou: adBannerIdKuaishou,
      showResult: false,
      isUnlock: false,
      period: 'month',
      payMonths: 6,
      showInsuranceDetail: false,
      formData: {
        income: "",
        insuranceTotal: "",
        socialBase: "",
        socialRate: "",
        fundBase: "",
        fundRate: "",
        specialDeduction: "",
      },
      result: {
        tax: 0,
        afterTaxIncome: 0,
        taxRate: 0,
      },
    };
  },
  onLoad() {
    adVideoCreate();
  },
  computed: {
    isBtnActive() {
      // 工资和专项附加扣除为必填项
      return this.formData.income !== '' && this.formData.specialDeduction !== '';
    },
    insuranceDesc() {
      // 展示五险一金公式
      const sBase = this.formData.socialBase || 0;
      const sRate = this.formData.socialRate || 0;
      const fBase = this.formData.fundBase || 0;
      const fRate = this.formData.fundRate || 0;
      return `${sBase}*${sRate}% + ${fBase}*${fRate}%`;
    },
    insuranceTotalValue() {
      // 优先用手动输入，否则用基数*比例，始终返回数字
      const manual = Number(this.formData.insuranceTotal);
      // 只要不是空字符串且不是null就返回manual（即使为0也返回0）
      if (!isNaN(manual) && this.formData.insuranceTotal !== '' && this.formData.insuranceTotal != null) {
        return manual;
      }
      const sBase = Number(this.formData.socialBase) || 0;
      const sRate = Number(this.formData.socialRate) || 0;
      const fBase = Number(this.formData.fundBase) || 0;
      const fRate = Number(this.formData.fundRate) || 0;
      return sBase * sRate / 100 + fBase * fRate / 100;
    },
  },
  methods: {
    calculateIncomeTax(income) {
      console.log("income", income);
      let tax = 0;
      let taxableIncome = income - this.formData.specialDeduction - this.formData.taxThreshold;
      
      if (taxableIncome <= 0) {
        this.taxRate = 0;
        tax = 0;
      } else if (taxableIncome <= 3000) {
        this.taxRate = 3;
        tax = taxableIncome * 0.03;
      } else if (taxableIncome <= 13000) {
        this.taxRate = 10;
        tax = taxableIncome * 0.1 - 210;
      } else if (taxableIncome <= 24000) {
        this.taxRate = 20;
        tax = taxableIncome * 0.2 - 1410;
      } else if (taxableIncome <= 35000) {
        this.taxRate = 25;
        tax = taxableIncome * 0.25 - 2660;
      } else if (taxableIncome <= 55000) {
        this.taxRate = 30;
        tax = taxableIncome * 0.3 - 4410;
      } else if (taxableIncome <= 75000) {
        this.taxRate = 35;
        tax = taxableIncome * 0.35 - 7160;
      } else if (taxableIncome <= 90000) {
        this.taxRate = 40;
        tax = taxableIncome * 0.4 - 15160;
      } else {
        this.taxRate = 45;
        tax = taxableIncome * 0.45 - 18160;
      }

      this.result.tax = tax.toFixed(2);
      this.result.afterTaxIncome = (this.formData.income - tax).toFixed(2);
      this.showResult = true;
    },

    getResult() {
      this.onCalculate();
    },

    submit() {
      if (!this.formData.income) {
        uni.showToast({
          title: '请输入税前收入',
          icon: 'none'
        });
        return;
      }

      if (!this.isUnlock) {
        showAdConfirmModal(() => {
          try {
            adVideoShow(() => {
              this.getResult();
            });
          } catch (error) {
            this.getResult();
          }
        });
      } else {
        this.getResult();
      }
    },
    onInsuranceHelp() {
      // 预留五险一金帮助弹窗
      uni.showToast({ title: '五险一金帮助', icon: 'none' });
    },
    onSpecialHelp() {
      // 预留专项附加扣除帮助弹窗
      uni.showToast({ title: '专项附加扣除帮助', icon: 'none' });
    },
    onCalculate() {
      // 计算应纳税所得额
      const months = this.period === 'year' ? 12 : 1;
      const income = Number(this.formData.income) || 0;
      const insurance = Number(this.insuranceTotalValue) || 0;
      const special = Number(this.formData.specialDeduction) || 0;
      const taxThreshold = 5000 * months;
      
      // 确保所有输入都是有效数字
      if (isNaN(income) || isNaN(insurance) || isNaN(special)) {
        uni.showToast({
          title: '请输入有效的数字',
          icon: 'none'
        });
        return;
      }

      const taxableIncome = income * months - insurance * months - special * months - taxThreshold;
      let tax = 0, taxRate = 0;

      if (taxableIncome <= 0) {
        tax = 0; 
        taxRate = 0;
      } else if (taxableIncome <= 3000 * months) {
        taxRate = 3; 
        tax = taxableIncome * 0.03;
      } else if (taxableIncome <= 12000 * months) {
        taxRate = 10; 
        tax = taxableIncome * 0.1 - 210 * months;
      } else if (taxableIncome <= 25000 * months) {
        taxRate = 20; 
        tax = taxableIncome * 0.2 - 1410 * months;
      } else if (taxableIncome <= 35000 * months) {
        taxRate = 25; 
        tax = taxableIncome * 0.25 - 2660 * months;
      } else if (taxableIncome <= 55000 * months) {
        taxRate = 30; 
        tax = taxableIncome * 0.3 - 4410 * months;
      } else if (taxableIncome <= 80000 * months) {
        taxRate = 35; 
        tax = taxableIncome * 0.35 - 7160 * months;
      } else {
        taxRate = 45; 
        tax = taxableIncome * 0.45 - 15160 * months;
      }

      // 确保计算结果有效
      tax = Math.max(0, tax);
      const afterTaxIncome = Math.max(0, income * months - tax - insurance * months);

      this.result = {
        tax: tax.toFixed(2),
        afterTaxIncome: afterTaxIncome.toFixed(2),
        taxRate: taxRate,
      };
      this.showResult = true;
      this.isUnlock = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.tax-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #6ea8ff 0%, #f5f7fa 100%);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 32rpx 0 32rpx;
  background: transparent;
}

.nav-title {
  font-size: 36rpx;
  color: #fff;
  font-weight: bold;
}

.share-btn {
  background: transparent;
  border: 2rpx solid #fff;
  color: #fff;
  font-size: 28rpx;
  padding: 8rpx 24rpx;
  border-radius: 32rpx;
  line-height: 1.5;
  margin: 0;
}

.share-btn::after {
  border: none;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.nav-dot, .nav-scan {
  color: #fff;
  font-size: 32rpx;
}

.tab-bar {
  display: flex;
  align-items: center;
  background: transparent;
  padding: 0 32rpx;
  margin-top: 24rpx;
}

.tab-item {
  font-size: 30rpx;
  color: #e3e8f0;
  margin-right: 48rpx;
  padding-bottom: 12rpx;
  position: relative;
}

.tab-active {
  color: #fff;
  font-weight: bold;
  border-bottom: 6rpx solid #fff;
}

.tab-content {
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  margin-top: 24rpx;
  min-height: 800rpx;
  box-shadow: 0 8rpx 32rpx rgba(110,168,255,0.08);
  padding: 32rpx 32rpx 32rpx 32rpx;
}

.period-switch {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 0 24rpx 0;
}
.period-item {
  font-size: 30rpx;
  color: #b0c6e6;
  margin-right: 48rpx;
  padding-bottom: 8rpx;
  position: relative;
  cursor: pointer;
}
.period-active {
  color: #387fff;
  font-weight: bold;
  border-bottom: 4rpx solid #387fff;
}

.form-group {
  background: #f8fafd;
  border-radius: 16rpx;
  margin-bottom: 32rpx;
  padding: 32rpx 24rpx 24rpx 24rpx;
}
.form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}
.form-label {
  font-size: 28rpx;
  color: #222;
  font-weight: bold;
}
.form-label-tip {
  font-size: 24rpx;
  color: #b0b0b0;
}
.form-input {
  width: 100%;
  height: 80rpx;
  background: #fff;
  border-radius: 12rpx;
  border: 1rpx solid #e3e8f0;
  font-size: 30rpx;
  color: #222;
  padding: 0 24rpx;
  margin-bottom: 12rpx;
  box-sizing: border-box;
}
.form-link-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 8rpx;
}
.form-link {
  color: #387fff;
  font-size: 26rpx;
  cursor: pointer;
}
.form-desc {
  font-size: 24rpx;
  color: #b0b0b0;
  margin-bottom: 12rpx;
}
.form-subgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-bottom: 8rpx;
}
.form-subgroup .form-input {
  flex: 1 1 48%;
  min-width: 48%;
  margin-bottom: 0;
}
.form-help-row {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}
.form-help-icon {
  background: #387fff;
  color: #fff;
  border-radius: 50%;
  width: 32rpx;
  height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22rpx;
  margin-right: 8rpx;
  cursor: pointer;
}
.form-help-link {
  color: #387fff;
  font-size: 24rpx;
  cursor: pointer;
}
.form-help-desc {
  font-size: 22rpx;
  color: #b0b0b0;
  margin-bottom: 8rpx;
  line-height: 1.6;
}
.main-btn {
  width: 100%;
  height: 88rpx;
  background: #387fff;
  color: #fff;
  border-radius: 16rpx;
  font-size: 32rpx;
  text-align: center;
  line-height: 88rpx;
  margin-top: 32rpx;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.main-btn-disabled {
  background: #e3e8f0;
  color: #b0b0b0;
  cursor: not-allowed;
}

.result-modal-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.result-modal {
  background: #fff;
  border-radius: 20rpx;
  padding: 48rpx 36rpx 36rpx 36rpx;
  min-width: 500rpx;
  box-shadow: 0 8rpx 32rpx rgba(110,168,255,0.12);
  text-align: center;
}
.result-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #387fff;
  margin-bottom: 32rpx;
}
.result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30rpx;
  color: #222;
  margin-bottom: 18rpx;
}
.result-value {
  color: #ff4757;
  font-weight: bold;
  font-size: 32rpx;
}
.result-modal-btn {
  margin-top: 32rpx;
  background: #387fff;
  color: #fff;
  border-radius: 12rpx;
  font-size: 30rpx;
  padding: 18rpx 0;
  text-align: center;
}
</style>